<template>
	<div class="indexbody">
		<el-container class="main-container">
			<el-aside class="main-left" :width="isCollapse?'46px':'226px'">
				<div class="menu-container">
					<transition name="el-fade-in-linear">
						<dt-menu :mini="isCollapse" :list-data="listData" class="sidebar-nav"></dt-menu>
					</transition>
				</div>
			</el-aside>
			
			<el-container>
				<el-header height="46px" class="main-top">
					<div class="head-nav">
						<div class="head-nav-left">
							<a href="#" @click.prevent="isCollapse=!isCollapse">
								<i :class="{'el-icon-s-unfold':isCollapse,'el-icon-s-fold':!isCollapse}"></i>
							</a>
						</div>
						<div class="head-nav-center">
							<div class="logo"><img src="../../assets/images/logo.png" /></div>
						</div>
						<ul class="head-nav-right">
							<li>
								<div class="avatar">
									<img :src="$api.loadFile(adminInfo.avatar)" v-if="adminInfo.avatar"/>
									<i class="el-icon-user-solid" v-else></i>
								</div>
								<h3>{{adminInfo.userName}}</h3>
							</li>
							<li>
								<el-dropdown>
									<span class="el-dropdown-link">
										<i class="el-icon-more"></i>
									</span>
									<el-dropdown-menu slot="dropdown" class="menu-dropdown">
										<el-dropdown-item>
											<el-link :underline="false" icon="el-icon-cloudy" :href="config.webUrl" target="_blank">
												预览网站
											</el-link>
										</el-dropdown-item>
										<el-dropdown-item>
											<el-link :underline="false" icon="el-icon-house" @click="$common.linkUrl('/')">
												管理中心
											</el-link>
										</el-dropdown-item>
										<el-dropdown-item>
											<el-link :underline="false" icon="el-icon-lock" @click="$common.linkUrl('/manager/password')">
												修改密码
											</el-link>
										</el-dropdown-item>
										<el-dropdown-item>
											<el-link :underline="false" icon="el-icon-switch-button" @click="handleLogout">
												注销登录
											</el-link>
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</li>
						</ul>
					</div>
				</el-header>
				<el-main class="main-right">
					<router-view v-on:initData="initData" :config="config" :user="adminInfo" v-cloak />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import DtMenu from '../../components/DtMenu.vue'
	export default {
		components: {
			DtMenu
		},
		data() {
			return {
				isCollapse: true,
				screenWidth: document.body.clientWidth,
				listData: [],
				config: {
					webName: '',
					webUrl: '',
					webCompany: '',
					webVersion: '',
				},
				adminInfo: {
					lastTime: '',
					lastIp: '',
					addTime: '',
				},
			}
		},
		methods: {
			async initData() {
				let _this = this;
				//加载菜单数据
				await _this.$api.request({
					url: '/account/manager/menu',
					loading: true,
					success(res) {
						_this.listData = res.data;
					}
				});
				//console.log('完成菜单加载')
				//加载系统信息
				await _this.$api.request({
					url: '/client/setting/sysconfig',
					success(res) {
						_this.config = res.data;
					}
				});
				//console.log('完成系统加载')
				//加载当前管理员信息
				await _this.$api.request({
					url: '/account/admin/info',
					success(res) {
						_this.adminInfo = res.data;
					}
				});
				//console.log('完成管理员加载')
			},
			pageResize(){
				let _this = this;
				this.$nextTick(() => {
					if(_this.screenWidth > 800){
						_this.isCollapse = false;
					}else{
						_this.isCollapse = true;
					}
				});
			},
			handleLogout(){
				this.$store.commit('logout')
			},
		},
		//初始化数据
		created() {
			this.initData()
		},
		mounted () {
			let _this = this;
			_this.pageResize();
			window.onresize = () => {
				return (() => {
					_this.screenWidth = window.screenWidth = document.body.clientWidth;
					_this.pageResize();
				})()
			}
		},
	}
</script>

<style lang="scss">
	.indexbody {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.main-container {
		height: 100%;
	}
	.main-left {
		display: block;
		position: relative;
		overflow: visible !important;
		.menu-container {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			.el-scrollbar__wrap {
				overflow-x: hidden;
			}
		}
	}
	.head-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 285px;
		background: #fff;
		.head-nav-left {
			flex-shrink: 0;
			a {
				display: block;
				float: left;
				width: 46px;
				height: 46px;
				color: #0e70d5;
				text-align: center;
				i {
					line-height: 46px;
					font-size: 20px;
				}
			}
			a:hover {
				color: #409EFF;
			}
		}
		.head-nav-center {
			flex-grow: 1;
			display: flex;
			align-items: center;
			.logo {
				position: relative;
				width: 180px;
				height: 32px;
				opacity: 0.3;
				img {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
		.head-nav-right {
			flex-shrink: 0;
			li {
				float: left;
				h3 {
					display: inline;
					line-height: 46px;
					color: #555;
					font-size: 14px;
					font-weight: 600;
				}
				.avatar {
					position: relative;
					display: block;
					float: left;
					margin: 8px 5px auto 0;
					width: 30px;
					height: 30px;
					line-height: 30px;
					box-sizing: border-box;
					border: 1px solid #ccc;
					border-radius: 50%;
					background: #fff;
					text-align: center;
					overflow: hidden;
					i {
						color: #ccc;
						font-size: 20px;
					}
					img {
						width: 100%;
						height: 100%;
					}
				}
				.el-dropdown-link {
					display: block;
					width: 46px;
					height: 46px;
					color: #333;
					text-align: center;
					cursor: pointer;
					:hover {
						color: #409EFF;
					}
					i {
						line-height: 46px;
						font-size: 20px;
					}
				}
			}
		}
	}
	.main-top,.main-top.el-header {
		margin: 0;
		padding: 0;
		background: #fff;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
		z-index: 2;
	}
	.main-right {
		display: block;
		position: relative;
		padding: 0 !important;
		overflow: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		overflow-y: auto !important;
	}
</style>